<template>
  <div>
    <div class="head">
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.push('/kind')"
          />
        </template>
        <template #right>
          <van-search v-model="ipt" placeholder="请输入搜索关键词" @focus="$router.push('/search')"/>
        </template>
      </van-nav-bar>
       <div class="screen">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    </div>
    <div>
      <ul class="proList1">
        <li
          class="van-hairline--bottom van-hairline--right"
          v-for="item in searchList"
          :key="item.proid"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" />
          <div>
            <h3 class="van-multi-ellipsis--l3">
              <span class="jd">京东超市</span>{{ item.proname }}
            </h3>
            <p>￥{{ item.originprice }}</p>
            <strong
              ><span class="zy">自营</span><span class="pl">20万+条评论</span
              ><a href="#" class="xs">看相似</a></strong
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
import { getSearchList } from "../api/cartlist";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      ipt: "",
      value1: 0,
      value2: "a",
      searchList: [],
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  created() {
    getSearchList({ count: 1, limitNum: 10, keyword: this.$route.params.keyword}).then((res) => {
      console.log(res.data.data);
      this.searchList = res.data.data;
    });
    this.ipt=this.$route.params.keyword
  },
  methods: {
    //点击商品跳转详情页
    jumpTo(proid) {
      this.$router.push("/details/" + proid);
      console.log(this.ipt);
    },
  },
};
</script>

<style scoped>

::v-deep .van-search {
  height: 100%;
  width: 100%;
}
::v-deep .van-nav-bar__right {
  left: 0.2rem;
}
::v-deep .van-tree-select {
  height: 100% !important;
}
.proList1 li{
  display: flex;
  justify-content: space-between;
  margin: 0 0.1rem 0.1rem 0;
}
.proList1 li img {
  width: 35%;
  margin-right: 0.2rem;
}
.proList1 li > div {
  width: 63%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.proList1 li h3 {
  font-size: 14px;
  font-weight: normal;
}
.proList1 li p {
  color: #ee0a24;
  line-height: 0.4rem;
  font-size: 20px;
}
strong {
  font-weight: normal;
}
</style>
